.reference-icon { display: block; inline-size: 1em; block-size: 1em; flex: 0 0 auto; overflow: visible; }
i[data-hud-icon] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
i[data-hud-icon]::before { content: none !important; }
i[data-hud-icon] > .reference-icon { inline-size: 1em; block-size: 1em; }
[dir="rtl"] i[data-hud-icon="arrow"] > svg,
[dir="rtl"] i[data-hud-icon="logout"] > svg { transform: scaleX(-1); }
html[dir="rtl"] body i.fa-solid[data-hud-icon="arrow"],
html[dir="rtl"] body i.fa-solid[data-hud-icon="logout"] { transform: none !important; }

.reference-dashboard .deck-panel {
  min-inline-size: 0;
  border-color: var(--line);
  border-radius: 10px;
  background: linear-gradient(130deg, rgb(19 92 145 / 8%), transparent 58%), var(--panel);
  box-shadow: inset 0 1px 0 rgb(83 180 244 / 7%), 0 7px 24px rgb(0 5 12 / 10%);
}
.reference-dashboard .deck-panel h2 { font-size: 15px; font-weight: 600; }
.reference-dashboard .deck-stage { isolation: isolate; }
.reference-dashboard .deck-stage::before {
  content: ""; position: absolute; inset: 3% -3% 12%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(0 111 255 / 11%), transparent 65%);
}
.reference-dashboard .deck-orbit-art { opacity: 1; }
.reference-dashboard .deck-sweep-clip { position: absolute; inset: 0; overflow: clip; border-radius: 50%; pointer-events: none; }
.reference-dashboard .deck-core {
  background: radial-gradient(ellipse at 50% 25%, #06254b, #021020 74%);
  box-shadow: inset 0 0 32px rgb(0 94 255 / 20%), 0 0 17px rgb(0 120 255 / 38%), 0 0 52px rgb(0 92 255 / 15%);
}
.reference-dashboard .deck-core img { object-fit: contain; filter: none; }
.reference-dashboard .deck-node,
html[data-theme="light"] .reference-dashboard .deck-node {
  --node-rgb: 0 190 255;
  --node-ink: #27ccff;
  color: #def6ff;
  border: 1px solid rgb(var(--node-rgb) / .75);
  background: radial-gradient(ellipse at 50% 0%, rgb(var(--node-rgb) / .24), transparent 65%), #031426;
  box-shadow: inset 0 1px 7px rgb(var(--node-rgb) / .23), 0 0 0 3px #010d19, 0 0 0 4px rgb(var(--node-rgb) / .3), 0 0 18px rgb(var(--node-rgb) / .2);
}
html[data-theme] .reference-dashboard .deck-node[data-tool="terminal"],
html[data-theme] .reference-dashboard .deck-node[data-tool="target"] { --node-rgb: 0 235 135; --node-ink: #00ee87; }
html[data-theme] .reference-dashboard .deck-node[data-tool="calculator"],
html[data-theme] .reference-dashboard .deck-node[data-tool="shield"] { --node-rgb: 255 41 65; --node-ink: #ff4858; }
html[data-theme] .reference-dashboard .deck-node[data-tool="news"],
html[data-theme] .reference-dashboard .deck-node[data-tool="range"] { --node-rgb: 255 207 18; --node-ink: #ffd020; }
.reference-dashboard .deck-node::before { border-color: rgb(var(--node-rgb) / .27); border-top-color: rgb(var(--node-rgb) / .7); }
.reference-dashboard .deck-node > .reference-icon {
  inline-size: 29%; block-size: 29%; min-inline-size: 20px; min-block-size: 20px;
  flex: 0 0 auto; color: var(--node-ink);
  filter: drop-shadow(0 0 4px rgb(var(--node-rgb) / .65));
}
.reference-dashboard .deck-node > span { display: grid; place-items: center; min-block-size: 2.36em; color: #f0f7ff; font-weight: 600; line-height: 1.18; text-wrap: balance; }
.reference-dashboard .deck-node:hover,
.reference-dashboard .deck-node:focus-visible { border-color: var(--node-ink); box-shadow: inset 0 0 18px rgb(var(--node-rgb) / .3), 0 0 0 3px #031324, 0 0 22px rgb(var(--node-rgb) / .5); }
.reference-dashboard .deck-action svg { filter: none; stroke-width: 1.9; }
html[data-theme] .reference-dashboard .deck-premium { color: var(--on-gold); background: linear-gradient(110deg, var(--fill-gold-start), var(--fill-gold-end)); border-color: var(--accent-gold); box-shadow: 0 0 14px #ffcf122b; font-weight: 600; }
html[data-theme] .reference-dashboard .deck-medal { color: var(--on-gold); background: #ffdf3a; border-color: #ffe875; box-shadow: 0 0 11px #ffcf1270; }
html[data-theme] .reference-dashboard .deck-status.red { color: var(--on-red); background: var(--fill-red-start); border-color: var(--accent-red); }
html[data-theme] .reference-dashboard .deck-status.green { color: var(--on-green); background: var(--accent-green); border-color: var(--accent-green); }
html[data-theme] .reference-dashboard .deck-status.blue { color: var(--on-blue); background: var(--fill-blue-start); border-color: var(--accent-blue); }
.reference-dashboard .deck-pedestal { background: radial-gradient(ellipse, rgb(0 128 245 / 24%), transparent 68%); }
.reference-dashboard .deck-star { box-shadow: 0 0 4px #fff3ca, 0 0 12px #ffdb89; }
.reference-dashboard .deck-actions-panel i[data-hud-icon] { font-size: 21px; filter: drop-shadow(0 0 4px currentColor); }
[dir="rtl"] .reference-dashboard .deck-orbit { direction: ltr; }
[dir="rtl"] .reference-dashboard .deck-node > span { direction: rtl; font-family: Tajawal, sans-serif; }

body.landing { --landing-gutter: clamp(24px, 5.7vw, 110px); }
body.landing .topbar {
  min-block-size: 76px; block-size: 76px; padding-inline: var(--landing-gutter); gap: 26px;
  background: var(--chrome-gradient); border-bottom: 1px solid var(--line);
}
body.landing .topbar .brand { flex: 0 0 auto; gap: 12px; }
body.landing .topbar .brand img { inline-size: 35px; block-size: 49px; object-fit: contain; filter: none; }
body.landing .brand > span { font-size: 22px; letter-spacing: .14em; }
body.landing .brand small { font-size: 7px; letter-spacing: .27em; }
body.landing .landing-nav { gap: clamp(18px, 2.1vw, 36px); margin-inline-start: auto; }
body.landing .landing-nav a { padding-block: 15px; color: #ccdef0; font-size: 14px; white-space: nowrap; }
body.landing .landing-nav a[aria-current] { color: #fff; text-shadow: 0 0 14px #42a6ff; }
body.landing .top-actions { gap: 9px; flex: 0 0 auto; }
body.landing .top-actions .icon-btn { min-inline-size: 44px; min-block-size: 44px; }
body.landing .topbar .btn { min-block-size: 42px; font-size: 13px; padding: 10px 17px; }
body.landing .topbar .btn.primary,
body.landing .reference-hero .btn.primary {
  color: #fff; border: 1px solid #3babff;
  background: linear-gradient(180deg, #0c98ff, #0074ed);
  box-shadow: inset 0 1px 0 #6fceff80, 0 0 21px #007aff38;
}
body.landing .reference-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 0;
  min-block-size: clamp(710px, calc(100svh - 76px), 1000px); block-size: auto;
  padding: 94px var(--landing-gutter) 180px; margin: 0; background: #010b13;
}
body.landing .reference-hero > .hero-art {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none;
  margin: 0; z-index: -2; opacity: 1; border: 0; border-radius: 0;
  background: url('../img/hero-whale-3d/whales_hero_master.jpg') center right / cover no-repeat;
  transform: none; transform-origin: 50% 50%; filter: none; mask-image: none; animation: none;
}
body.landing .reference-hero::before { content: none; }
body.landing .reference-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #010b1380, #010b130d 49%, transparent 65%);
}
body.landing .reference-hero .hero-copy {
  position: relative; z-index: 1; inline-size: 57%; max-inline-size: 800px;
  margin: 0; margin-inline-end: auto; padding: 0; text-align: start;
  transform: none; opacity: 1; animation: reference-arrive .65s ease-out both;
}
body.landing .reference-hero .eyebrow {
  display: inline-flex; max-inline-size: 100%; padding: 5px 11px; margin-block-end: 25px;
  color: #9bdfff; background: rgb(2 23 41 / 54%); border: 1px solid #1b4d6b;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; line-height: 1.4;
}
body.landing .reference-hero h1 {
  margin: 0 0 25px; max-inline-size: none; font-family: Barlow, sans-serif;
  font-size: clamp(48px, 5.2vw, 92px); font-weight: 700; line-height: 1.02; letter-spacing: -.025em;
  text-shadow: 0 2px 20px rgb(0 0 0 / 16%); color: #f4f8ff;
}
body.landing .reference-hero h1 > span { display: block; }
body.landing .reference-hero h1 .text-gradient {
  color: #13adff; background: linear-gradient(100deg, #72e3ff, #0099ff 78%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.landing .reference-hero .hero-copy > p {
  margin: 0; max-inline-size: 520px; font-size: clamp(14px, 1.13vw, 18px); line-height: 1.65; color: #dae8f8;
}
body.landing .reference-hero .hero-copy > .hero-description { color: #c8ddef; }
body.landing .reference-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 23px; margin-block-start: 32px; }
body.landing .reference-hero .hero-actions .btn { min-block-size: 48px; padding: 12px 25px; gap: 14px; font-size: 15px; border-radius: 6px; }
body.landing .reference-hero .hero-actions .btn.ghost { padding-inline: 0; background: transparent; border: 0; box-shadow: none; color: #e5efff; }
body.landing .reference-hero .hero-actions .btn.ghost i { font-size: 31px; }
body.landing .reference-hero .hero-stats {
  position: absolute; inset-inline: var(--landing-gutter); inset-block-end: 36px; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  inline-size: auto; padding: 27px 0 0; margin: 0; border-block-start: 1px solid #23547466;
  background: none; backdrop-filter: none;
}
body.landing .reference-hero .hero-stats > div { display: flex; align-items: center; flex-direction: column; gap: 2px; padding: 0 12px; min-inline-size: 0; border: 0; text-align: center; }
body.landing .reference-hero .hero-stats > div + div { border-inline-start: 1px solid #1b3c525e; }
body.landing .reference-hero .hero-stats strong { color: #e8f5ff; font: 600 35px/1.15 Rajdhani, sans-serif; text-shadow: 0 0 16px #1c9eff38; }
body.landing .reference-hero .hero-stats > div > span { color: #b9d5ed; font-size: 13px; line-height: 1.45; }
body.landing .landing-section { max-inline-size: 1600px; padding-inline: var(--landing-gutter); margin-inline: auto; min-inline-size: 0; }
body.landing .landing-section > *, body.landing .feature-grid > *, body.landing .course-grid > * { min-inline-size: 0; }
body.landing .section-title h2, body.landing .ecosystem h2 { text-wrap: balance; }
body.landing .feature-card { border-color: var(--line); background: linear-gradient(135deg, #0863ac0c, transparent 60%), var(--panel); }
body.landing .feature-icon i { font-size: 28px; filter: drop-shadow(0 0 5px #079fff80); }
body.landing .ecosystem { gap: clamp(24px, 4vw, 72px); }
body.landing .ecosystem > div:first-child { text-align: start; }
body.landing .ecosystem .hud-stage { direction: ltr; min-inline-size: 0; max-inline-size: 100%; }
body.landing .ecosystem .hud-coordinates { color: var(--muted); font-size: 9px; gap: 12px; }
body.landing .ecosystem .hud-coordinates > span { min-inline-size: 0; }
body.landing .ecosystem .hud-core { background: radial-gradient(ellipse at top, #092a53, #021122 70%); box-shadow: 0 0 28px #0077ff60, inset 0 0 18px #146aff44; }
body.landing .ecosystem .hud-core img { inline-size: 43%; block-size: 46%; object-fit: contain; filter: none; }
html[data-theme] body.landing .ecosystem .hud-core > strong,
html[data-theme] .reference-dashboard .deck-core > strong { color: #ecf8ff; }
html[data-theme] body.landing .ecosystem .hud-core > span,
html[data-theme] .reference-dashboard .deck-core > span { color: #9ac8ed; }
body.landing .ecosystem .hud-node {
  inline-size: 18.5%; block-size: auto; aspect-ratio: 1; min-inline-size: 0; padding: 6px; gap: 5px;
  border: 1px solid #388abe; background: radial-gradient(ellipse at top, #0d3659, #02101f 75%);
  box-shadow: inset 0 1px 8px #6bcaff30, 0 0 0 3px #020d1c, 0 0 0 4px #174b7780, 0 0 15px #007aff24;
}
body.landing .ecosystem .hud-node i { font-size: clamp(19px, 2.1vw, 30px); color: #b9f3ff; filter: drop-shadow(0 0 4px #129fff); }
body.landing .ecosystem .hud-node > span { max-inline-size: 100%; font-size: clamp(8px, .86vw, 12px); line-height: 1.2; color: #e4f3ff; text-align: center; text-wrap: balance; }
body.landing .landing-footer { padding-inline: var(--landing-gutter); gap: 20px; }
body.landing .landing-cta { margin-inline: var(--landing-gutter); }
.landing-menu { position: relative; flex: 0 0 auto; display: none; }
.landing-menu > summary { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 7px; color: var(--text); }
.landing-menu > summary::-webkit-details-marker { display: none; }
.landing-menu > summary .reference-icon { inline-size: 21px; block-size: 21px; }
.landing-menu-panel { position: absolute; inset-block-start: calc(100% + 12px); inset-inline-end: 0; z-index: 100; inline-size: min(270px, calc(100vw - 32px)); max-block-size: calc(100svh - 100px); overflow-y: auto; display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line-hi); border-radius: 10px; background: var(--panel); box-shadow: 0 16px 40px #0006; }
.landing-menu:not([open]) .landing-menu-panel { display: none; }
.landing-menu-panel a { display: flex; align-items: center; min-block-size: 44px; padding: 10px 14px; border-radius: 6px; font-size: 15px; color: var(--text); text-align: start; }
.landing-menu-panel a:hover, .landing-menu-panel a:focus-visible { background: var(--tinted-surface, #1683c21a); }
.landing-menu > summary:focus-visible, .landing-menu-panel a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
html[dir="rtl"] body.landing .reference-hero > .hero-art { transform: scaleX(-1); }
html[dir="rtl"] body.landing .reference-hero::after { transform: scaleX(-1); }
html[dir="rtl"] body.landing .reference-hero h1 { font-family: Tajawal, sans-serif; font-size: clamp(45px, 4.65vw, 84px); line-height: 1.23; letter-spacing: 0; }
html[dir="rtl"] body.landing .reference-hero .eyebrow { letter-spacing: 0; font-size: 12px; }
html[dir="rtl"] body.landing .reference-hero .hero-copy > p { font-size: clamp(15px, 1.2vw, 19px); }
html[dir="rtl"] body.landing .section-title, html[dir="rtl"] body.landing .feature-card, html[dir="rtl"] body.landing .course-card { text-align: start; }
html[dir="rtl"] body.landing .eyebrow, html[dir="rtl"] body.landing .hud-mantra { letter-spacing: 0; }
html[dir="rtl"] body.landing .hud-node > span { direction: rtl; font-family: Tajawal, sans-serif; }
html[dir="rtl"] body.landing .inline-badges { justify-content: flex-start; }
html[data-theme="light"] body.landing .topbar { background: #f6fbff; border-bottom-color: #b5d1e3; }
html[data-theme="light"] body.landing .topbar .brand img { filter: brightness(0); }
html[data-theme="light"] body.landing .landing-nav a { color: #2b4a63; }
html[data-theme="light"] body.landing .landing-nav a[aria-current] { color: #006fac; text-shadow: none; }
html[data-theme="light"] body.landing .reference-hero .btn.primary { color: #fff; }
html[data-theme="light"] body.landing .reference-hero .btn.ghost { color: #e5efff; }
@keyframes reference-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1200px) {
  body.landing .topbar { gap: 18px; padding-inline: 28px; }
  body.landing .landing-nav { gap: 18px; }
  body.landing .topbar .brand > span { font-size: 18px; }
  body.landing .reference-hero .hero-copy { inline-size: 63%; }
}
@media (max-width: 1050px) {
  body.landing .landing-nav { display: none; }
  body.landing .top-actions { margin-inline-start: auto; }
  .landing-menu { display: block; }
  body.landing .ecosystem { grid-template-columns: minmax(0, 1fr); }
  body.landing .ecosystem .hud-stage { inline-size: min(600px, 100%); margin-inline: auto; }
  body.landing .ecosystem .hud-node > span { font-size: 12px; }
  body.landing .ecosystem .hud-node i { font-size: 29px; }
}
@media (max-width: 767px) {
  body.landing { --landing-gutter: 24px; }
  body.landing .topbar { block-size: 68px; min-block-size: 68px; padding-inline: 20px; gap: 10px; }
  body.landing .topbar .brand { gap: 8px; }
  body.landing .topbar .brand img { inline-size: 28px; block-size: 43px; }
  body.landing .topbar .brand > span { font-size: 17px; }
  body.landing .topbar .brand small { font-size: 6px; }
  body.landing .topbar .top-actions { gap: 5px; }
  body.landing .topbar .login-link, body.landing .topbar .get-started { display: none; }
  body.landing .reference-hero { display: block; min-block-size: 0; padding: 46px var(--landing-gutter) 26px; }
  body.landing .reference-hero > .hero-art { inset-block-start: auto; inset-block-end: 172px; block-size: 326px; background-size: auto 100%; background-position: 80% center; mask-image: linear-gradient(transparent, #000 10%, #000 87%, transparent); }
  body.landing .reference-hero::after { background: linear-gradient(180deg, #010b13 0, transparent 45%, transparent 82%, #010b13 100%); }
  body.landing .reference-hero .hero-copy { inline-size: 100%; max-inline-size: none; padding-block-end: 314px; }
  body.landing .reference-hero .eyebrow { margin-block-end: 21px; font-size: 8px; }
  body.landing .reference-hero h1 { font-size: clamp(39px, 7.6vw, 57px); line-height: 1.07; margin-block-end: 21px; }
  body.landing .reference-hero .hero-copy > p { font-size: 14px; line-height: 1.65; }
  body.landing .reference-hero .hero-actions { gap: 22px; margin-block-start: 24px; }
  body.landing .reference-hero .hero-actions .btn { min-block-size: 46px; padding: 10px 18px; font-size: 13px; gap: 9px; }
  body.landing .reference-hero .hero-actions .btn.ghost { padding-inline: 0; }
  body.landing .reference-hero .hero-actions .btn.ghost i { font-size: 26px; }
  body.landing .reference-hero .hero-stats { position: relative; inset: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px 0; padding-block-start: 23px; }
  body.landing .reference-hero .hero-stats > div:nth-child(3) { border-inline-start: 0; }
  body.landing .reference-hero .hero-stats strong { font-size: 29px; }
  body.landing .reference-hero .hero-stats > div > span { font-size: 12px; }
  body.landing .landing-section { padding-block: 58px; }
  body.landing .feature-grid, body.landing .landing-courses { grid-template-columns: minmax(0, 1fr); }
  body.landing .ecosystem .hud-node { gap: 3px; padding: 4px; }
  body.landing .ecosystem .hud-node > span { font-size: 8px; line-height: 1.18; }
  body.landing .ecosystem .hud-node i { font-size: 20px; }
  body.landing .ecosystem .hud-coordinates { font-size: 7px; }
  body.landing .ecosystem .hud-mantra { font-size: 8px; letter-spacing: .19em; }
  body.landing .landing-footer { flex-wrap: wrap; padding-block: 28px; }
  body.landing .landing-footer > * { min-inline-size: 0; max-inline-size: 100%; }
  html[dir="rtl"] body.landing .reference-hero h1 { font-size: clamp(35px, 7.5vw, 55px); line-height: 1.3; }
  html[dir="rtl"] body.landing .reference-hero .hero-copy > p { font-size: 15px; }
  html[dir="rtl"] body.landing .reference-hero .eyebrow { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing .reference-hero .hero-copy { animation: none; }
  .reference-dashboard .deck-node, .landing-menu > summary { transition: none; }
}